<template>
  <div>
    <div class="pintuan">
      <div
        class="tuan_box"
        ref="tscroll"
      >
        <div
          class="tuan_container"
          :style="{width:pintuanList.educationLIST.length*fenleiwidth+`px`}"
        >
          <div
            class="tuan"
            v-for="(item,index) in pintuanList.educationLIST"
            :key="index"
            @click="pinyuandetail(item)"
          >
            <img
              :src="item.cover"
              class="tuan_img"
              alt=""
            >
            <!-- <div class="dingwtop">团购</div> -->

            <div class="tuan_wz">
              <div class="tuan_wz_heng">
                <div class="tuan_bt"><span class="ptjian">荐</span>{{item.title}}</div>
              </div>
              <div class="tuan_wz_heng2">
                <div class="tuan_class">¥{{item.assemble_money}}</div>
                <div class="tuan_grayprice">{{item.scribing_money}}</div>
              </div>
              <div class="tuan_line"></div>
              <div class="tuan_wz_heng">
                <div class="tuan_perple">
                  <div class="tuan_perple_num">{{item.number}}</div>人拼团成功
                </div>
                <div class="tuan_alread">{{item.number}}人成团</div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>

  </div>
</template>

<script>
import BScroll from 'better-scroll'
export default {
  props: ['pintuanList'],
  data () {
    return {
      clientWidth: '',
      fenleiwidth: 0
    }
  },
  methods: {
    pinyuandetail (item) {
      this.$emit('pinyuandetail', item)
    }
  },
  components: {},
  created () {
  },
  mounted () {
    this.clientWidth = `${document.documentElement.clientWidth}`
    window.onresize = function temp () {
      this.clientHeight = `${document.documentElement.clientHeight}`
    }
    this.$nextTick(() => {
      let tscrollDom = this.$refs.tscroll
      this.aBScroll = new BScroll(tscrollDom, {
        scrollX: true,
        scrollY: false
      })
    })
  },
  watch: {
    clientWidth: function () {
      this.fenleiwidth = parseInt(this.clientWidth) * 330 / 750
    }
  }
}
</script>
<style>
.pintuan {
  height: calc(100vw * 304 / 750 * 310 / 304);
  width: 100%;
  position: relative;
  margin-bottom: calc(100vw * 304 / 750 * 40 / 304);
}
.tuan_box {
  /* margin-bottom: 20px; */
  width: 100%;
  height: calc(100vw * 304 / 750 * 310 / 304);
  overflow: hidden;
}
.tuan_container {
  white-space: nowrap;
  height: 110%;
}
.pintuan_box {
  width: 90%;
  margin: 0 auto;
  vertical-align: top;
}
.tuan {
  display: inline-block;
  margin-right: calc(100vw * 14 / 750);
  width: calc(100vw * 304 / 750);
  /* height: 156px; */
  padding-bottom: calc(100vw * 304 / 750 * 4 / 304);
  background-color: #ffffff;
  box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.18);
  border-radius: 8px;
  position: relative;
}
.tuan:first-child {
  margin-left: calc(100vw * 38 / 750);
}
.tuan_img {
  height: calc(100vw * 304 / 750 * 166 / 304);
  width: 100%;
  border-radius: 8px 8px 0px 0px;
  vertical-align: top;
  /* border-top: 2px solid #DA4131; */
}
.dingwtop {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 40px;
  height: 20px;
  background-color: #DA4131;
  border-radius: 0px 8px 0px 8px;
  font-family: PingFangSC-Regular;
  font-size: 13px;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 1px;
  color: #fffefe;
  text-align: center;
  line-height: 20px;
}
.tuan_wz {
  padding: 3px 4px;
}
.tuan_wz_heng {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  align-content: space-between;
  align-items: center;
}
/* .tuan_wz_heng :first-child {
  margin-bottom: 3px;
} */
.tuan_wz_heng2 {
  text-align: left;
}
.tuan_bt {
  width: 100%;
  font-family: PingFangSC-Medium;
  font-size: 13px;
  letter-spacing: 1px;
  color: #1a1a1a;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tuan_redprice {
  font-family: PingFangSC-Medium;
  font-size: 15px;
  letter-spacing: 1px;
  color: #DA4131;
  margin-bottom: 4px;
}
.tuan_class {
  display: inline-block;
  font-family: PingFangSC-Regular;
  font-size: 15px;
  /* margin-right: 2px; */
  color: #DA4131;
}
.tuan_grayprice {
  display: inline-block;
  font-family: PingFangSC-Regular;
  font-size: 10px;
  text-decoration: line-through;
  color: #999999;
}
.tuan_perple {
  font-family: PingFangSC-Regular;
  font-size: 10px;
  letter-spacing: 0px;
  color: #999999;
  vertical-align: middle;
}
.tuan_perple_num {
  display: inline;
  color: #DA4131;
}
.tuan_line {
  width: calc(100vw * 240 / 750);
  height: 1px;
  background-color: #f0f0f0;
  margin: 1px auto 3px;
  margin-top: calc(100vw * 304 / 750 * 2 / 304);
  margin-bottom: calc(100vw * 304 / 750 * 6 / 304);
}
.tuan_alread {
  font-family: PingFangSC-Regular;
  font-size: 9px;
  letter-spacing: 0px;
  color: #DA4131;
  width: 44px;
  height: 12px;
  line-height: 12px;
  text-align: center;
  border-radius: 12px;
  border: solid 1px #DA4131;
  vertical-align: middle;
}
.ptjian {
  display: inline-block;
  padding: 0px 2px;
  background: #DA4131;
  font-family: PingFangSC-Regular;
  font-size: 12px;
  color: #ffffff;
  margin-right: 4px;
  text-align: center;
  border-radius: 2px;
}
</style>
